<template>
  <NSpin v-show="status === 'loading'">loading...</NSpin>
  <NButton v-show="status === 'success'" @click="change">按钮</NButton>
  <QuillEditor v-model:content="content" theme="snow" content-type="html" />
</template>

<script setup lang="ts">
import { NSpin, NButton } from 'naive-ui'

const status = ref('loading')
const content = ref(`<p>Quill Rich Text Editor</p>
<p>
    <br>
</p>
<p>Quill is a free,
    <a href="https://github.com/quilljs/quill/" target="_blank">open source</a>WYSIWYG editor built for the modern web. With its
    <a href="http://quilljs.com/docs/modules/" target="_blank">extensible architecture</a>and a
    <a href="http://quilljs.com/docs/api/" target="_blank">expressive API</a>you can completely customize it</p>
<p>
    <br>
</p>
<ul>
    <li>Fast and lightweight</li>
    <li>Semantic markup</li>
    <li>Standardized HTML between browsers</li>
    <li>Cross browser support including Chrome, Firefox, Safari, and IE 9+</li>
</ul>
<p>
    <span style="font-size: 18px;">Downloads</span>
</p>
<img src="https://www.hsmap.com/static/img/20231122.f294357.png" />
`)

function change() {
  status.value = 'loading'
  setTimeout(() => {
    status.value = 'success'
  }, 3000)
}

setTimeout(() => {
  status.value = 'success'
}, 3000)
</script>
